<template>
  <div class="buildingEdit2">
    <el-button style="margin-bottom: 10px;" size="small" @click="addBuilding">添加建筑</el-button>
    <el-button style="margin-bottom: 10px;" size="small" @click="save">保存</el-button>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      ref="tree"
      class="filter-tree"
      :data="treeData"
      :props="defaultProps"
      :accordion="true"
      :expand-on-click-node="true"
      :filter-node-method="filterNode"
      :highlight-current="true"
      :render-content="renderContent"
      @node-click="changeFloor"
    >
    </el-tree>
  </div>
</template>

<script>
  const STRUCTURE_TYPE = {
    BUILDING: "building",
    FLOOR: "floor",
    ROOM: "room",
    UNKNOWN: "unknown",
  }

  let typeOfStructure = function(data) { // 判断房间类型
    let type = STRUCTURE_TYPE.UNKNOWN;
    if(data.blName) {
      type = STRUCTURE_TYPE.BUILDING;
    } else if(data.flName) {
      type = STRUCTURE_TYPE.FLOOR;
    } else if(data.rmName) {
      type = STRUCTURE_TYPE.ROOM;
    }
    return type;
  }

  let findNodeIndexInCurrentLevel = function(node) {
    let index = null;
    let parentNode = node.parent;
    if(!parentNode) {
      return index;
    }
    for(let i=0; i<parentNode.childNodes.length; i++) {
      if(parentNode.childNodes[i] === node) {
        index = i;
        break;
      }
    }
    return index;
  }

  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

    methods: {
      filterNode(value, data) {
        if (!value){
          return true;
        }
        if(typeOfStructure(data) === STRUCTURE_TYPE.BUILDING) {
          return data.blName.indexOf(value) !== -1;
        } else if(typeOfStructure(data) === STRUCTURE_TYPE.FLOOR) {
          return data.flName.indexOf(value) !== -1;
        } else if(typeOfStructure(data) === STRUCTURE_TYPE.ROOM) {
          return data.rmName.indexOf(value) !== -1;
        } else {
          return false;
        }
      },
      renderContent(h, { node, data }) {
        let buttonArea = (
          <template></template>
        );
        let labelName = "";
        if(typeOfStructure(data) === STRUCTURE_TYPE.BUILDING) {
          labelName = data.blName;
          buttonArea = (
            <span style="float: right; margin-right: 20px">
              <el-button size="small" type="text" on-click={ (e) =>this.addFloor(node, data, e) }>新增楼层</el-button>
              <el-button size="small" type="text" on-click={ (e) => this.removeBuilding(node, data, e) }>删除建筑</el-button>
            </span>
          );
        } else if(typeOfStructure(data) === STRUCTURE_TYPE.FLOOR) {
          labelName = data.flName;
          buttonArea = (
            <span style="float: right; margin-right: 20px">
              <el-button size="small" type="text" on-click={ (e) => this.removeFloor(node, data, e) }>删除楼层</el-button>
            </span>
          );
        } else if(typeOfStructure(data) === STRUCTURE_TYPE.ROOM) {
          labelName = data.rmName;
          buttonArea = (
            <el-button size="small" type="text"  style="float: right; margin-right: 20px;margin-top: 6px;">
              <a on-click={ (e) => this.toDetail(data, e) }>查看详情</a>
            </el-button>
          );
        }
        return (
          <span>
            <span>
              <span>{labelName}</span>
            </span>
            {buttonArea}
          </span>);
      },
      changeFloor(data) {
        let floorId = null;
        if(typeOfStructure(data) === STRUCTURE_TYPE.FLOOR || typeOfStructure(data) === STRUCTURE_TYPE.ROOM) {
          if(data.flId) {
            floorId = data.flId;
          } else {
            this.$alert('请先保存后再编辑楼层布局', '')
          }
        }
        this.$emit("changeFloor", floorId);
      },
      addBuilding() {
        this.$emit("addBuilding");
      },
      removeBuilding(node, data, e) {
        e.stopPropagation();
        let buildingIndex = findNodeIndexInCurrentLevel(node);
        if(buildingIndex !== null) {
          this.$emit("removeBuilding", buildingIndex);
        } else {
          console.error("节点获取失败");
        }
      },
      addFloor(node, data, e) {
        e.stopPropagation();
        let buildingIndex = findNodeIndexInCurrentLevel(node);
        if(buildingIndex !== null) {
          this.$emit("addFloor", buildingIndex);
        } else {
          console.error("节点获取失败");
        }
      },
      removeFloor(node, data, e) {
        e.stopPropagation();
        let floorIndex = findNodeIndexInCurrentLevel(node);
        let buildingIndex = findNodeIndexInCurrentLevel(node.parent);
        if(floorIndex!==null && buildingIndex!==null) {
          this.$emit("removeFloor", buildingIndex, floorIndex);
        } else {
          console.error("节点获取失败");
        }
      },
      toDetail(data, e) {
        e.stopPropagation();
        if(data.rmId) {
          this.$router.push({name: "roomInfo", params: {rmId: data.rmId}});
        }
      },
      save() {
        this.$emit("save");
      }
    },

    props: {
      treeData: Array
    },

    data() {
      return {
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

<style>
  .buildingEdit2 {

    width:90%;
    float: left;
    padding: 20px 10px;
    background-color: #EFF2F7;
    box-shadow: -1px 2px 5px #cccccc;
    margin-bottom: 30px;
  }
  .buildingEdit2 .el-input{
    margin-bottom: 5px;
    width: 100%!important;
  }
</style>
